<template>
<div class="layerRtb layerRtb-threecolumn">
    <three-title :title="{name:'施工资料'}"></three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "270">
        <div :class="{'analyItem': true, 'anItemBor': true, 'anItemBor-active': index === fourIndex}" v-for="(item,index) in dataTitle" :key='index' @click="fourIndexClick(index)">
            <p class="analyItemTit tx-center">{{item}}</p>
            <div class="analyItemCon">
                <div class="col-md-3">
                     <span class="cLightGray pr8">数量</span>
                     <span>{{numberTitle[index]}}</span>
                </div>
            </div>
        </div>
    </div>
    <div class="layerRtb-footer">
        <div class="analyItem">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon">
                <div class="col-md-3">
                     <span class="cLightGray pr8">总数</span>
                     <span>{{dataList.length}}</span>
                </div>
            </div>
        </div>
    </div>
    <!-- 四段渲染容器 -->
    <transition-group class="animated faster" enter-active-class="animated faster slideInRight" leave-active-class="animated faster slideOutRight">
        <rx-conDataFour v-if="fourIndex === currentIndex" :key="currentIndex" :currentDataList='currentDataList'></rx-conDataFour>
    </transition-group>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { findTypeSubjectExecute } from '../../Resources/Api/data'
import rxConDataFour from './four/condataFour.vue'
export default {
    components: {
        rxConDataFour
    },
    data () {
        return {
            currentIndex: undefined, // 当前下标
            fourIndex: undefined, // 下标
            dataList: [], // 资料数据
            dataTitle: ['前期', '中期', '尾期', '其他'],
            numberTitle: [], // 数量数组
            currentDataList: [], // 当前数据
            dataListOne: [], // 前期
            dataListTwo: [], // 中期
            dataListThree: [], // 后期
            dataListFour: [] // 其他
        }
    },
    computed: {
        ...mapGetters(['leftInfo', 'userInfo'])
    },
    created () {
        this.findTypeSubjectExecute()
    },
    methods: {
        clickFourShow () {
            this.fourIndex = undefined
        },
        // 获取资料数据
        findTypeSubjectExecute () {
            let parms = {
                orderNo: this.leftInfo.orderno, // 订单号
                category: 0
            }
            findTypeSubjectExecute(parms).then((result) => {
                if (result.data.StatusCode === 0) {
                    this.dataList = result.data.Body
                    if (this.dataList.length > 0) {
                        this.dataListOne = this.dataList.filter((item) => { return item.category === 60 })
                        this.dataListTwo = this.dataList.filter((item) => { return item.category === 61 })
                        this.dataListThree = this.dataList.filter((item) => { return item.category === 62 })
                        this.dataListFour = this.dataList.filter((item) => { return item.category === 63 })
                        this.numberTitle.push(this.dataListOne.length, this.dataListTwo.length, this.dataListThree.length, this.dataListFour.length)
                    }
                }
            }).catch((error) => {
                console.log(error)
            })
        },
        // 点击事件
        fourIndexClick (index) {
            this.currentDataList = this.currentData(index)
            this.fourIndex = index
            this.currentIndex = index
        },
        // 当前的数据
        currentData (index) {
            let currentDataList = []
            switch (index) {
            case 0:
                currentDataList = this.dataListOne
                break
            case 1:
                currentDataList = this.dataListTwo
                break
            case 2:
                currentDataList = this.dataListThree
                break
            case 3:
                currentDataList = this.dataListFour
                break
            default:
                break
            }
            return currentDataList
        }
    },
    watch: {
        leftInfo () {
            this.findTypeSubjectExecute()
        }
    }
}
</script>
